<template>
  <div class="mt--20 purchase-detail">
    <el-tabs v-model="tab" type="border-card">
      <el-tab-pane label="采购基础信息">
        <div class="detail-section">
          <el-row type="flex" align="middle">
            <el-col :span="12">采购基础信息</el-col>
            <el-col class="text-right" :span="12">
              <el-button v-permission="authConfig.updateStatus" type="success" v-if="detail.status && detail.status != '已入库'" @click="updateStatusHandle">{{btnText[detail.status]&&btnText[detail.status].text||''}}</el-button>
              <el-button v-print="printObj" type="danger" @click="print">打印采购单</el-button>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-form class="detail-form" label-width="120px" label-suffix=":">
            <el-row>
             <el-col :span="6">
                <el-form-item label="采购编号">
                  <span class="detail-value">{{detail.code}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购门店">
                  <span class="detail-value">{{detail.storeName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购供应商">
                  <span class="detail-value">{{detail.supplierName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购数量">
                  <span class="detail-value">{{detail.partsNum}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="单据日期">
                  <span class="detail-value">{{detail.receiptsTime}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供应商联系人">
                  <span class="detail-value">{{detail.supplierUserName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="供应商联系方式">
                  <span class="detail-value">{{detail.supplierPhone}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购总金额">
                  <span class="detail-value">{{detail.amount}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="采购备注">
                  <span class="detail-value">{{detail.remark}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购状态">
                  <span class="detail-value">{{detail.status}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="采购类型">
                  <span class="detail-value">{{detail.type | dictFilter('采购类型')}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="detail-section">
          <el-row>采购进度</el-row>
          <el-divider></el-divider>
          <steps
            v-if="detail.statusList != null && detail.statusList.length > 0"
            :setpsList="detail.statusList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="采购订单信息">
        <el-row>采购精品列表</el-row>
        <el-divider></el-divider>
        <data-table
          :has-action="false"
          :value="tableData"
          :total-count="totalCount"
          :table-column-attributes="tableColumns"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
          <div class="total-count" slot="allNum">
            精品总金额:<span class="money-value">￥{{countData.amount}}</span>
          </div>
        </data-table>
      </el-tab-pane>
    </el-tabs>
    <!-- <purchase-print-form :id="printObj.id"/> -->
  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import { Steps } from '@/components/index'
import purchasePrintForm from './printForm'
import { exportFile } from '@/utils/index'
import {
  detailById,
  partsPage,
  updateStatus
} from '@/api/pre-sale/boutiquePurchase/apply'

export default {
  components: { DataTable, purchasePrintForm, Steps },
  props: ['detailData'],
  data() {
    this.authConfig = {
      updateStatus: 'purchaseRecord:updateStatus'
    }

    this.tableColumns = [
      { name: '精品编号', value: 'partsCode', type: 'text' },
      { name: '精品名称', value: 'partsName', type: 'text' },
      { name: '精品一级分类', value: 'partsType', type: 'text' },
      { name: '精品二级分类', value: 'partsUnit', type: 'text' },
      { name: '采购数量', value: 'purchaseNum', type: 'text' },
      { name: '成本价', value: 'purchasePrice', type: 'text' },
      { name: '总金额', value: 'amount', type: 'text' }
    ]

    this.btnText = {
      待采购: {
        text: '开始采购',
        status: '采购中'
      },
      采购中: {
        text: '采购完成',
        status: '采购完成'
      },
      采购完成: {
        text: '采购入库',
        status: '采购入库'
      }
    }

    return {
      tab: 0,
      detail: {},
      countData: {
        amount: 0,
        count: 0
      },
      pageSize: 10,
      currentPage: 1,
      tableData: [],
      totalCount: 0,
      printObj: {
        id: 'purchaseApplyPrint',
        popTitle: '',
        extraCss: '',
        extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      }
    }
  },
  watch: {
    tab(newVlaue) {
      if (newVlaue == 1 && this.tableData.length == 0) {
        this.handleCurrentChange(1)
      }
    }
  },
  methods: {
     async print() {
      exportFile(
        `${process.env.BASE_API}/sq/brandPurchaseRecord/print/${this.detail.id}`,
        `${this.detail.code}-采购单.pdf`
      )
    },
  
    updateStatusHandle() {
      const item = this.btnText[this.detail.status]
      if (item.text === '采购入库') {
        this.$router.push({
          name: 'putInAdd',
          params: {
            id: 0,
            inStorageType: '采购入库',
            sourceCode: this.detail.code
          }
        })
      } else {
        updateStatus(this.detail.id, item.status).then((res) => {
          this.$emit('refresh')
          this.requestDetail(this.detail.id)
        })
      }
    },
    requestDetail(id) {
      detailById(id).then((res) => {
        this.detail = res.data || {}
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.requestPartsPage()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.requestPartsPage()
    },
    // 请求精品分页
    requestPartsPage() {
      partsPage(
        { purchaseRecordId: this.detailData.id },
        this.pageSize,
        this.currentPage
      ).then((res) => {
        const { content, totalRecords } = res.data
        let amount = 0
        this.totalCount = totalRecords || 0
        this.tableData = content || []
        this.tableData.forEach((item) => {
          amount += item.amount
        })
        this.countData.amount = amount
      })
    },
    printHandle() {}
  },
  mounted() {
    if (this.detailData) {
      this.requestDetail(this.detailData.id)
    }
  }
}
</script>

<style></style>
